<template>
    <div class="tabNav">
				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="课程介绍" name="first">
						<div class="categoryContainer" :class="cate==true?'fold':''">
							<el-row class="category" :gutter="20">
								<el-col class="categoryTitle" :span="2">兴趣爱好:</el-col>
								<el-col class="categoryList" :span="22">
									<div class="select-item active-cate">街舞</div>

								</el-col>
							</el-row>
							<el-row class="category" :gutter="20">
								<el-col class="categoryTitle" :span="2">兴趣爱好:</el-col>
								<el-col class="categoryList" :span="22">
									<div class="select-item">街舞</div>
									<div class="select-item">街舞</div>

								</el-col>
							</el-row>
							<el-row class="category" :gutter="20">
								<el-col class="categoryTitle" :span="2">保障:</el-col>
								<el-col class="categoryList" :span="22">
									<div class="select-item">街舞</div>
									<div class="select-item">街舞</div>
								</el-col>
							</el-row>
							<el-row class="category" :gutter="20">
								<el-col class="categoryTitle" :span="2">教师:</el-col>
								<el-col class="categoryList" :span="22">
									<div class="select-item">杨老师</div>
								</el-col>
							</el-row>
							<el-row class="category" :gutter="20">
								<el-col class="categoryTitle" :span="2">教师:</el-col>
								<el-col class="categoryList" :span="22">
									<div class="select-item">街舞</div>
									<div class="select-item">街舞</div>
								</el-col>
							</el-row>
						</div>
					</el-tab-pane>
					<el-tab-pane label="评论(5)" name="second">
						<el-row class="category">
							<el-col class="Commit" :span="4">该商品评价</el-col>
							<div class="start">
								<svg t="1666179727829" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6051" width="24" height="24">
									<path
										d="M481.8 103.8c22.8-7.7 48.6-6.8 71.9 4.7 18.6 9.2 33.6 24.2 42.8 42.8l74.1 150.1c3.9 8 11.6 13.5 20.4 14.8l165.6 24.1c25.7 3.7 47.5 17.6 61.9 36.9 14.4 19.3 21.5 44.1 17.7 69.9-3 20.5-12.6 39.4-27.5 53.9L788.9 617.7c-6.4 6.2-9.3 15.2-7.8 24l28.3 165c4.4 25.6-2 50.6-15.9 70.3-13.9 19.7-35.3 34-61 38.4-20.4 3.5-41.4 0.2-59.7-9.5L524.6 828c-7.9-4.1-17.3-4.1-25.2 0l-148.1 77.9c-23 12.1-48.8 13.7-71.8 6.6-23-7.2-43.3-23.1-55.4-46.1-9.6-18.3-13-39.3-9.5-59.7l28.3-165c1.5-8.8-1.4-17.7-7.8-24L115.3 500.9c-18.6-18.2-28.1-42.1-28.4-66.2-0.3-24.1 8.6-48.3 26.7-66.9 14.5-14.8 33.4-24.5 53.9-27.5l165.6-24.1c8.8-1.3 16.4-6.8 20.4-14.8l74.1-150.1c11.5-23.3 31.3-39.8 54.2-47.5z"
										fill="#f93684" p-id="6052"></path>
									<path
										d="M307.6 950.3c-12.7 0-25.6-1.9-38.1-5.8-32.6-10.1-59.3-32.3-75.1-62.5-13-24.7-17.6-53.5-12.8-81l27.7-161.6L91.9 524.9c-24.4-23.8-38.1-55.7-38.6-89.8-0.4-34.1 12.4-66.4 36.3-90.8 19.5-20 45.5-33.2 73.1-37.2L325 283.5l72.6-147c15-30.6 41.1-53.5 73.4-64.5 32.3-11 67-8.7 97.5 6.4 25 12.4 45.6 33 58 58l72.6 147L861.4 307c33.8 4.9 63.6 22.7 84 50s28.9 61 24 94.8c-4 27.6-17.2 53.6-37.2 73.1L814.7 639.4 842.4 801c5.8 33.6-1.9 67.5-21.6 95.3-19.7 27.9-49.1 46.4-82.7 52.1-27.5 4.7-56.3 0.2-81-12.8L512 859.3l-145.1 76.3c-18.6 9.8-38.9 14.7-59.3 14.7z m204.5-818c-6.6 0-13.1 1.1-19.5 3.2-15.3 5.2-27.7 16.1-34.9 30.6l-74.1 150.1c-8.8 17.9-25.9 30.3-45.6 33.2l-165.6 24.1c-13.1 1.9-25.4 8.2-34.7 17.7-11.3 11.6-17.4 26.9-17.2 43.1s6.7 31.3 18.3 42.6l119.8 116.8c14.3 13.9 20.8 34 17.4 53.7l-28.3 164.9c-2.2 13.1-0.1 26.7 6.1 38.5 7.5 14.3 20.2 24.9 35.7 29.7 15.5 4.8 31.9 3.3 46.2-4.2l148.1-77.9c17.7-9.3 38.8-9.3 56.4 0l148.1 77.9c11.7 6.2 25.4 8.3 38.5 6.1 16-2.7 29.9-11.5 39.2-24.7 9.4-13.2 13-29.3 10.3-45.3l-28.3-165c-3.4-19.7 3.1-39.7 17.4-53.7l119.8-116.8c9.5-9.3 15.8-21.6 17.7-34.7 2.3-16-1.7-32-11.4-45-9.7-13-23.8-21.4-39.9-23.7L686 349.4c-19.8-2.9-36.8-15.3-45.6-33.2l-74.1-150.1c-5.9-11.9-15.6-21.7-27.5-27.5-8.4-4.2-17.6-6.3-26.7-6.3z m-30.3-28.5z"
										fill="#f93684" p-id="6053"></path>
								</svg>
								<svg t="1666179727829" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6051" width="24" height="24">
									<path
										d="M481.8 103.8c22.8-7.7 48.6-6.8 71.9 4.7 18.6 9.2 33.6 24.2 42.8 42.8l74.1 150.1c3.9 8 11.6 13.5 20.4 14.8l165.6 24.1c25.7 3.7 47.5 17.6 61.9 36.9 14.4 19.3 21.5 44.1 17.7 69.9-3 20.5-12.6 39.4-27.5 53.9L788.9 617.7c-6.4 6.2-9.3 15.2-7.8 24l28.3 165c4.4 25.6-2 50.6-15.9 70.3-13.9 19.7-35.3 34-61 38.4-20.4 3.5-41.4 0.2-59.7-9.5L524.6 828c-7.9-4.1-17.3-4.1-25.2 0l-148.1 77.9c-23 12.1-48.8 13.7-71.8 6.6-23-7.2-43.3-23.1-55.4-46.1-9.6-18.3-13-39.3-9.5-59.7l28.3-165c1.5-8.8-1.4-17.7-7.8-24L115.3 500.9c-18.6-18.2-28.1-42.1-28.4-66.2-0.3-24.1 8.6-48.3 26.7-66.9 14.5-14.8 33.4-24.5 53.9-27.5l165.6-24.1c8.8-1.3 16.4-6.8 20.4-14.8l74.1-150.1c11.5-23.3 31.3-39.8 54.2-47.5z"
										fill="#f93684" p-id="6052"></path>
									<path
										d="M307.6 950.3c-12.7 0-25.6-1.9-38.1-5.8-32.6-10.1-59.3-32.3-75.1-62.5-13-24.7-17.6-53.5-12.8-81l27.7-161.6L91.9 524.9c-24.4-23.8-38.1-55.7-38.6-89.8-0.4-34.1 12.4-66.4 36.3-90.8 19.5-20 45.5-33.2 73.1-37.2L325 283.5l72.6-147c15-30.6 41.1-53.5 73.4-64.5 32.3-11 67-8.7 97.5 6.4 25 12.4 45.6 33 58 58l72.6 147L861.4 307c33.8 4.9 63.6 22.7 84 50s28.9 61 24 94.8c-4 27.6-17.2 53.6-37.2 73.1L814.7 639.4 842.4 801c5.8 33.6-1.9 67.5-21.6 95.3-19.7 27.9-49.1 46.4-82.7 52.1-27.5 4.7-56.3 0.2-81-12.8L512 859.3l-145.1 76.3c-18.6 9.8-38.9 14.7-59.3 14.7z m204.5-818c-6.6 0-13.1 1.1-19.5 3.2-15.3 5.2-27.7 16.1-34.9 30.6l-74.1 150.1c-8.8 17.9-25.9 30.3-45.6 33.2l-165.6 24.1c-13.1 1.9-25.4 8.2-34.7 17.7-11.3 11.6-17.4 26.9-17.2 43.1s6.7 31.3 18.3 42.6l119.8 116.8c14.3 13.9 20.8 34 17.4 53.7l-28.3 164.9c-2.2 13.1-0.1 26.7 6.1 38.5 7.5 14.3 20.2 24.9 35.7 29.7 15.5 4.8 31.9 3.3 46.2-4.2l148.1-77.9c17.7-9.3 38.8-9.3 56.4 0l148.1 77.9c11.7 6.2 25.4 8.3 38.5 6.1 16-2.7 29.9-11.5 39.2-24.7 9.4-13.2 13-29.3 10.3-45.3l-28.3-165c-3.4-19.7 3.1-39.7 17.4-53.7l119.8-116.8c9.5-9.3 15.8-21.6 17.7-34.7 2.3-16-1.7-32-11.4-45-9.7-13-23.8-21.4-39.9-23.7L686 349.4c-19.8-2.9-36.8-15.3-45.6-33.2l-74.1-150.1c-5.9-11.9-15.6-21.7-27.5-27.5-8.4-4.2-17.6-6.3-26.7-6.3z m-30.3-28.5z"
										fill="#f93684" p-id="6053"></path>
								</svg>
								<svg t="1666179727829" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6051" width="24" height="24">
									<path
										d="M481.8 103.8c22.8-7.7 48.6-6.8 71.9 4.7 18.6 9.2 33.6 24.2 42.8 42.8l74.1 150.1c3.9 8 11.6 13.5 20.4 14.8l165.6 24.1c25.7 3.7 47.5 17.6 61.9 36.9 14.4 19.3 21.5 44.1 17.7 69.9-3 20.5-12.6 39.4-27.5 53.9L788.9 617.7c-6.4 6.2-9.3 15.2-7.8 24l28.3 165c4.4 25.6-2 50.6-15.9 70.3-13.9 19.7-35.3 34-61 38.4-20.4 3.5-41.4 0.2-59.7-9.5L524.6 828c-7.9-4.1-17.3-4.1-25.2 0l-148.1 77.9c-23 12.1-48.8 13.7-71.8 6.6-23-7.2-43.3-23.1-55.4-46.1-9.6-18.3-13-39.3-9.5-59.7l28.3-165c1.5-8.8-1.4-17.7-7.8-24L115.3 500.9c-18.6-18.2-28.1-42.1-28.4-66.2-0.3-24.1 8.6-48.3 26.7-66.9 14.5-14.8 33.4-24.5 53.9-27.5l165.6-24.1c8.8-1.3 16.4-6.8 20.4-14.8l74.1-150.1c11.5-23.3 31.3-39.8 54.2-47.5z"
										fill="#f93684" p-id="6052"></path>
									<path
										d="M307.6 950.3c-12.7 0-25.6-1.9-38.1-5.8-32.6-10.1-59.3-32.3-75.1-62.5-13-24.7-17.6-53.5-12.8-81l27.7-161.6L91.9 524.9c-24.4-23.8-38.1-55.7-38.6-89.8-0.4-34.1 12.4-66.4 36.3-90.8 19.5-20 45.5-33.2 73.1-37.2L325 283.5l72.6-147c15-30.6 41.1-53.5 73.4-64.5 32.3-11 67-8.7 97.5 6.4 25 12.4 45.6 33 58 58l72.6 147L861.4 307c33.8 4.9 63.6 22.7 84 50s28.9 61 24 94.8c-4 27.6-17.2 53.6-37.2 73.1L814.7 639.4 842.4 801c5.8 33.6-1.9 67.5-21.6 95.3-19.7 27.9-49.1 46.4-82.7 52.1-27.5 4.7-56.3 0.2-81-12.8L512 859.3l-145.1 76.3c-18.6 9.8-38.9 14.7-59.3 14.7z m204.5-818c-6.6 0-13.1 1.1-19.5 3.2-15.3 5.2-27.7 16.1-34.9 30.6l-74.1 150.1c-8.8 17.9-25.9 30.3-45.6 33.2l-165.6 24.1c-13.1 1.9-25.4 8.2-34.7 17.7-11.3 11.6-17.4 26.9-17.2 43.1s6.7 31.3 18.3 42.6l119.8 116.8c14.3 13.9 20.8 34 17.4 53.7l-28.3 164.9c-2.2 13.1-0.1 26.7 6.1 38.5 7.5 14.3 20.2 24.9 35.7 29.7 15.5 4.8 31.9 3.3 46.2-4.2l148.1-77.9c17.7-9.3 38.8-9.3 56.4 0l148.1 77.9c11.7 6.2 25.4 8.3 38.5 6.1 16-2.7 29.9-11.5 39.2-24.7 9.4-13.2 13-29.3 10.3-45.3l-28.3-165c-3.4-19.7 3.1-39.7 17.4-53.7l119.8-116.8c9.5-9.3 15.8-21.6 17.7-34.7 2.3-16-1.7-32-11.4-45-9.7-13-23.8-21.4-39.9-23.7L686 349.4c-19.8-2.9-36.8-15.3-45.6-33.2l-74.1-150.1c-5.9-11.9-15.6-21.7-27.5-27.5-8.4-4.2-17.6-6.3-26.7-6.3z m-30.3-28.5z"
										fill="#f93684" p-id="6053"></path>
								</svg>
								<svg t="1666179727829" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6051" width="24" height="24">
									<path
										d="M481.8 103.8c22.8-7.7 48.6-6.8 71.9 4.7 18.6 9.2 33.6 24.2 42.8 42.8l74.1 150.1c3.9 8 11.6 13.5 20.4 14.8l165.6 24.1c25.7 3.7 47.5 17.6 61.9 36.9 14.4 19.3 21.5 44.1 17.7 69.9-3 20.5-12.6 39.4-27.5 53.9L788.9 617.7c-6.4 6.2-9.3 15.2-7.8 24l28.3 165c4.4 25.6-2 50.6-15.9 70.3-13.9 19.7-35.3 34-61 38.4-20.4 3.5-41.4 0.2-59.7-9.5L524.6 828c-7.9-4.1-17.3-4.1-25.2 0l-148.1 77.9c-23 12.1-48.8 13.7-71.8 6.6-23-7.2-43.3-23.1-55.4-46.1-9.6-18.3-13-39.3-9.5-59.7l28.3-165c1.5-8.8-1.4-17.7-7.8-24L115.3 500.9c-18.6-18.2-28.1-42.1-28.4-66.2-0.3-24.1 8.6-48.3 26.7-66.9 14.5-14.8 33.4-24.5 53.9-27.5l165.6-24.1c8.8-1.3 16.4-6.8 20.4-14.8l74.1-150.1c11.5-23.3 31.3-39.8 54.2-47.5z"
										fill="#f93684" p-id="6052"></path>
									<path
										d="M307.6 950.3c-12.7 0-25.6-1.9-38.1-5.8-32.6-10.1-59.3-32.3-75.1-62.5-13-24.7-17.6-53.5-12.8-81l27.7-161.6L91.9 524.9c-24.4-23.8-38.1-55.7-38.6-89.8-0.4-34.1 12.4-66.4 36.3-90.8 19.5-20 45.5-33.2 73.1-37.2L325 283.5l72.6-147c15-30.6 41.1-53.5 73.4-64.5 32.3-11 67-8.7 97.5 6.4 25 12.4 45.6 33 58 58l72.6 147L861.4 307c33.8 4.9 63.6 22.7 84 50s28.9 61 24 94.8c-4 27.6-17.2 53.6-37.2 73.1L814.7 639.4 842.4 801c5.8 33.6-1.9 67.5-21.6 95.3-19.7 27.9-49.1 46.4-82.7 52.1-27.5 4.7-56.3 0.2-81-12.8L512 859.3l-145.1 76.3c-18.6 9.8-38.9 14.7-59.3 14.7z m204.5-818c-6.6 0-13.1 1.1-19.5 3.2-15.3 5.2-27.7 16.1-34.9 30.6l-74.1 150.1c-8.8 17.9-25.9 30.3-45.6 33.2l-165.6 24.1c-13.1 1.9-25.4 8.2-34.7 17.7-11.3 11.6-17.4 26.9-17.2 43.1s6.7 31.3 18.3 42.6l119.8 116.8c14.3 13.9 20.8 34 17.4 53.7l-28.3 164.9c-2.2 13.1-0.1 26.7 6.1 38.5 7.5 14.3 20.2 24.9 35.7 29.7 15.5 4.8 31.9 3.3 46.2-4.2l148.1-77.9c17.7-9.3 38.8-9.3 56.4 0l148.1 77.9c11.7 6.2 25.4 8.3 38.5 6.1 16-2.7 29.9-11.5 39.2-24.7 9.4-13.2 13-29.3 10.3-45.3l-28.3-165c-3.4-19.7 3.1-39.7 17.4-53.7l119.8-116.8c9.5-9.3 15.8-21.6 17.7-34.7 2.3-16-1.7-32-11.4-45-9.7-13-23.8-21.4-39.9-23.7L686 349.4c-19.8-2.9-36.8-15.3-45.6-33.2l-74.1-150.1c-5.9-11.9-15.6-21.7-27.5-27.5-8.4-4.2-17.6-6.3-26.7-6.3z m-30.3-28.5z"
										fill="#f93684" p-id="6053"></path>
								</svg>
								<span>4.0</span>
							</div>
					
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="购买售后" name="third">
						<div>一、宪法的地位是怎样的？</div>
						<p>二、我国现行宪法是哪一年通过施行的？</p>
						<p>三、我国“宪法日”是哪一天？</p>
						<p>四、我国现行宪法包括哪几个部分？</p>
					</el-tab-pane>
				</el-tabs>
			</div>
</template>

<script setup lang="ts">

</script>

<style scoped>

/* 视频下方导航 */
/deep/.demo-tabs>.el-tabs__content {
	margin: 80px;
	margin-top: 20px;
	color: #6b778c;
	/* font-size: 32px; */
	/* font-weight: 600; */
}

/* 导航的每一项 */
/deep/.el-tabs__item {
	display: inline-block;
	font-size: 24px;
	color: #b1b5c1;
	margin: 0 24px 35px;
	cursor: pointer;
	text-align: center;
	line-height: 80px;
}

/* 导航上部整体文字块 */
/deep/.el-tabs__nav {
	margin-left: 90px;
}

/* 高亮 */
/deep/.el-tabs__active-bar {
	left: 90px;
	background-color: #f93684;
}

/* 文字高亮 */
/deep/.is-active {
	color: black;
}

/* 课程介绍 */

.category {
	display: flex;
	align-items: center;
}

.categoryTitle {
	color: #b1b5c1;
	padding: 7px 0;
	font-size: 14px;
	box-sizing: border-box;
}

.categoryList {
	/* border:none; */
	/* display: flex; */
}

.select-item {
	display: inline-block;
	cursor: pointer;
	font-size: 14px;
	color: #7d8090;
	margin-right: 24px;
	margin-bottom: 10px;
	margin-top: 8px;
	padding: 7px 13px;
	border-radius: 4px;
}

/* 商品评价 */
.Commit {
	color: black;
	font-size: 18px;
}

.start {
	display: flex;
	align-items: center;
}

.start .icon {
	margin-right: 10px;
}
</style>